<template>
  <div class="hotCategoriesInfo">
    <div class="carousel">
      <v-carousel-com :carouselInfoList="hotCategories"></v-carousel-com>
    </div>
    <div class="hotCategoriesComicInfo">
      <v-info-component
        v-for="(item, index) in hotCategoriesComicList"
        :key="index"
        :infoVo="item"
      ></v-info-component>
    </div>
  </div>
</template>
<script>
import vCarouselCom from './CarouselCom';
import vInfoComponent from './InfoComponent';
export default {
  components: {
    vCarouselCom,
    vInfoComponent
  },
  props: {
    hotCategories: {
      type: Array
    },
    hotCategoriesComicList: {
      type: Array
    }
  }

};
</script>
<style lang="less" scoped>
// .hotCategoriesInfo {
//   width: 100%;
//   height: 100%;
//   //background-color: sandybrown;
//   flex-direction: row;
// }
// .hotCategoriesInfo .carousel {
//   width: 496px;
//   height: 100%;
//   float: left;
//   //background-color: lavender;
// }
// .hotCategoriesInfo .hotCategoriesComicInfo {
//   width: 704px;
//   height: 100%;
//   //background-color: oldlace;
//   display: flex;
//   flex: 1;
//   flex-wrap: wrap;
//   align-content: space-between;
//   justify-content: space-between;
//   float: left;
//   .infoMain {
//     float: left;
//   }
// }
.hotCategoriesInfo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.hotCategoriesInfo .carousel {
  width: 496px;
  height: 100%;
  //background-color: lavender;
}
.hotCategoriesInfo .hotCategoriesComicInfo {
  height: 100%;
  //background-color: oldlace;
  display: flex;
  flex: 1;
  margin-left: 10px;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  .infoMain {
    float: left;
  }
}
</style>
